<template>
  <div>
    <div
      class="switch-aside-btn"
      :class="{ isCollapse: isCollapse }"
      @click="switchAsideBtn"
    >
      <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
    </div>

    <!-- 折叠和展开配置不同的宽度 -->
    <el-aside :width="isCollapse ? '64px' : '200px'">
      <!-- 配置 el-menu -->
      <!-- 只展开唯一项，是否折叠，是否有折叠动画，开启 route 模式，以路由模式跳转 -->
      <el-menu
        :unique-opened="true"
        :collapse="isCollapse"
        :collapse-transition="false"
        :router="true"
        :default-active="indexValue"
        @select="handleElMenu"
      >
        <el-submenu
          v-for="item1 in asideList"
          :key="item1.id"
          :index="item1.order + ''"
        >
          <template slot="title">
            <i :class="iconListObj[item1.id]"></i>
            <span>{{ item1.authName }}</span>
            <!-- <span>{{ item1.path }}</span> -->
          </template>
          <el-menu-item
            v-for="item2 in item1.children"
            :key="item2.id"
            :index="item2.path"
          >
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>{{ item2.authName }}</span>
              <!-- <span>{{ item2.path }}</span> -->
            </template>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
  </div>
</template>

<script>
export default {
  props: {
    asideList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      isCollapse: false,
      indexValue: 'users',
      iconListObj: {
        125: 'el-icon-user-solid',
        103: 'el-icon-warning',
        101: 'el-icon-s-goods',
        102: 'el-icon-s-order',
        145: 'el-icon-s-marketing'
      }
    }
  },
  created() {
    // 修改侧边栏默认展示的index
    // console.log(this.$route.name)
    this.indexValue = this.$route.name
    // console.log(this.asideList)
  },
  methods: {
    // 切换侧边栏---
    switchAsideBtn() {
      this.isCollapse = !this.isCollapse
    },
    handleElMenu(index) {
      this.indexValue = index
    }
  }
}
</script>

<style lang="less" scoped>
.switch-aside-btn {
  position: absolute;
  bottom: 0;
  left: 200px;
  font-size: 24px;
  color: #999;
  background-color: #ffffff;
  border: 1px solid #eeeeee;
  padding: 5px 8px;
  transition: 0.3s all;
  cursor: pointer;
  &.isCollapse {
    left: 64px;
  }
}

.el-aside {
  // background-color: #d3dce6;
  border-right: none;
  color: #333;
  border: 1px solid #eeeeee;
  transition: 0.3s all;
  overflow: hidden;
  .el-menu {
    border-right: none;
  }
}
</style>
